<template>
  <div
    class="common-marquee-text"
    ref="container"
    @mouseenter="onMouseenter"
    @mouseleave="onMouseleave"
  >
    <div
      class="marquee-text"
      :style="{ width: `${contentWidth}px`, fontSize }"
      v-show="isAnimation"
    >
      <span
        class="marquee-text-item"
        v-for="(n, j) in 2"
        :key="j"
        :style="{
          width: `${contentWidth}px`,
          animationDuration: `${animationDuration}s`,
        }"
      >
        {{ content }}
      </span>
    </div>
    <div class="thumbnail-text" v-show="!isAnimation" :style="{ fontSize }">
      {{ content }}
    </div>
    <span v-if="isTag" ref="content" class="marquee-tag">{{ content }}</span>
  </div>
</template>

<script>
export default {
  name: "CommonMarqueeText",
  props: {
    content: {
      type: String,
      default: "",
    }, // 内容
    isAutoPlay: {
      type: Boolean,
      default: false,
    }, // 自动滚动
    color: {
      type: String,
      default: "#333",
    }, // 文字颜色
    fontSize: {
      type: String,
      default: "14px",
    }, // 文字颜色
    offsetDuration: {
      type: Number,
      default: 5,
    }, // 动画偏移时长 数值越大越慢 越小越快
  },
  data() {
    return {
      hasAnimation: false, // 需要动画
      isAnimation: false, // 开启动画
      isTag: false, // 临时显示tag
      animationDuration: 5, // 动画时长
      contentWidth: 0, // 文字宽度
    };
  },
  watch: {
    content: {
      handler(val) {
        this.handleAnimation();
      },
      immediate: true,
    },
  },
  methods: {
    handleAnimation() {
      this.isTag = true;

      this.$nextTick(() => {
        this.getHasAnimation();
        this.isTag = false;
      });
    },

    getHasAnimation() {
      if (this.$refs.content && this.$refs.container) {
        let contentWidth = this.$refs.content.getBoundingClientRect().width;
        let containerWidth = this.$refs.container.getBoundingClientRect().width;
        this.contentWidth = contentWidth + 8;
        this.animationDuration =
          (contentWidth / containerWidth) * 5 + this.offsetDuration;
        this.hasAnimation = contentWidth > containerWidth;
        if (this.isAutoPlay) this.isAnimation = this.hasAnimation;
      }
    },

    onMouseenter() {
      if (!this.isAutoPlay) {
        this.isTag = true;
        this.$nextTick(() => {
          this.getHasAnimation();
          this.isAnimation = this.hasAnimation;
          this.isTag = false;
        });
      }
    },
    onMouseleave() {
      if (!this.isAutoPlay) this.isAnimation = false;
    },
  },
  mounted() {
    this.handleAnimation();
  },
};
</script>

<style scoped lang="scss">
@keyframes marquee {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-100%);
  }
}

.common-marquee-text {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  cursor: pointer;
  overflow-x: hidden;

  .marquee-text {
    height: 100%;
    white-space: nowrap;

    .marquee-text-item {
      height: 20px;
      display: inline-block;
      padding: 0 4px;
      box-sizing: border-box;
      animation-name: marquee;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: normal;
    }
  }

  .thumbnail-text {
    // padding: 0 4px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .marquee-tag {
    position: fixed;
    opacity: 0;
    left: 0;
    top: 0;
    z-index: -1;
  }
}
</style>
